'use client';

import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/store/useAuthStore';
import MainLayout from '@/components/layout/MainLayout';
import RepositoryList from '@/components/repository/RepositoryList';

const RepositoriesPage = () => {
  const { isAuthenticated, isLoading } = useAuthStore();
  const router = useRouter();

  useEffect(() => {
    // 如果未认证且不在加载中，重定向到登录页面
    if (!isAuthenticated && !isLoading) {
      router.push('/login');
    }
  }, [isAuthenticated, isLoading, router]);

  // 如果未认证且不在加载中，不渲染内容
  if (!isAuthenticated && !isLoading) {
    return null;
  }

  return (
    <MainLayout>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">我的仓库</h1>
          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
            查看和管理您的 Gitee 仓库
          </p>
        </div>

        {isLoading ? (
          <div className="flex justify-center items-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-500"></div>
          </div>
        ) : (
          <RepositoryList />
        )}
      </div>
    </MainLayout>
  );
};

export default RepositoriesPage;